<template>
	<div>
		<Echart :options="options" id="bar_c" ref="bar_c" width="100%" height="170px"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					// 绘制左侧面
					const wid = 10;
					const w1 = Math.sin(Math.PI / 6) * wid; //4
					const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
					const snapHeight = wid / 2;
					const CubeLeft = this.$echarts.graphic.extendShape({
						shape: {
							x: 0,
							y: 0,
						},
						buildPath: function(ctx, shape) {
							const xAxisPoint = shape.xAxisPoint;
							const c0 = [shape.x, shape.y];
							const c1 = [shape.x - w2, shape.y];
							const c2 = [shape.x - w2, xAxisPoint[1]];
							const c3 = [shape.x, xAxisPoint[1]];
							ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0],
								c3[1]).closePath();
						},
					});
					// 绘制右侧面
					const CubeRight = this.$echarts.graphic.extendShape({
						shape: {
							x: 0,
							y: 0,
						},
						buildPath: function(ctx, shape) {
							const xAxisPoint = shape.xAxisPoint;
							const c1 = [shape.x, shape.y];
							const c2 = [shape.x, xAxisPoint[1]];
							const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight];
							const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
							ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0],
								c4[1]).closePath();
						},
					});
					// 绘制顶面
					const CubeTop = this.$echarts.graphic.extendShape({
						shape: {
							x: 0,
							y: 0,
						},
						buildPath: function(ctx, shape) {
							//
							const c1 = [shape.x, shape.y];
							const c2 = [shape.x + w1, shape.y - w2 + snapHeight]; //右点
							const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
							const c4 = [shape.x - w2, shape.y];
							ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0],
								c4[1]).closePath();
						},
					});
					// 三个面图形
					this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
					this.$echarts.graphic.registerShape('CubeRight', CubeRight);
					this.$echarts.graphic.registerShape('CubeTop', CubeTop);

					let xData = newData.scale;
					let yData = newData.seriesData;
					this.options = {
						tooltip: {},
						grid: {
							x: 0,
							y: 20,
							x2: 30,
							y2: 10,
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: xData,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#3e6f8e',
									width: 1,
								},
							},
							axisTick: {
								show: false,
								length: 9,
								alignWithLabel: false,
								lineStyle: {
									color: '#AAA',
								},
							},
							axisLabel: {
								fontSize: 10,
								margin: 10,
								color: 'white',
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#ffffff',
									opacity: 0.2,
									width: 1,
								},
							},
						},
						yAxis: {
							name: '单位：万元',
							type: 'value',
							nameTextStyle: {
								color: 'white',
								fontSize: 10,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#3e6f8e',
									width: 1,
								},
							},
							axiosTick: {
								show: false,
							},
							axisLabel: {
								color: 'white',
								fontSize: 10,
								margin: 10,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#ffffff',
									opacity: 0.2,
									width: 1,
								},
							},
							nameGap: 20,
						},
						series: [{
								name: newData.name,
								type: 'bar',
								label: {
									show: true,
									position: 'top',
									fontSize: 10,
									color: '#fff',
									offset: [0, 0],
								},
								itemStyle: {
									color: 'transparent',
								},
								data: yData,
							},
							{
								type: 'custom',
								renderItem: (params, api) => {
									const location = api.coord([api.value(0), api.value(1)]);
									location[0] = location[0] + wid * 0;
									const xlocation = api.coord([api.value(0), 0]);
									xlocation[0] = xlocation[0] + wid * 0;
									return {
										type: 'group',
										children: [{
												type: 'CubeLeft',
												shape: {
													api,
													xValue: api.value(0),
													yValue: api.value(1),
													x: location[0],
													y: location[1],
													xAxisPoint: xlocation,
												},
												style: {
													fill: new this.$echarts.graphic.LinearGradient(0, 0, 0,
														1, [{
																offset: 0,
																color: '#059de6',
															},
															{
																offset: 1,
																color: '#059de6',
															},
														]),
												},
											},
											{
												type: 'CubeRight',
												shape: {
													api,
													xValue: api.value(0),
													yValue: api.value(1),
													x: location[0],
													y: location[1],
													xAxisPoint: xlocation,
												},
												style: {
													fill: new this.$echarts.graphic.LinearGradient(0, 0, 0,
														1, [{
																offset: 0,
																color: '#254193',
															},
															{
																offset: 1,
																color: '#254193',
															},
														]),
												},
											},
											{
												type: 'CubeTop',
												shape: {
													api,
													xValue: api.value(0),
													yValue: api.value(1),
													x: location[0],
													y: location[1],
													xAxisPoint: xlocation,
												},
												style: {
													fill: new this.$echarts.graphic.LinearGradient(0, 0, 0,
														1, [{
																offset: 0,
																color: '#17e0fe',
															},
															{
																offset: 1,
																color: '#17e0fe',
															},
														]),
												},
											},
										],
									};
								},
								color: 'blue',
								data: yData,
							},
						],

					};
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>